<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			body {
				padding: 0;
				margin: 0;
			}

			.box {
				position: absolute;
				bottom: -1px;
				left: -100vw;
				right: 0;
				z-index: 50;
				filter: drop-shadow(#fff 100vw 0px);
			}

			.svg-box {
				position: relative;
				width: 100%;
				height: 15vh;
				margin-bottom: -7px;
				min-height: 100px;
				max-height: 150px;
			}

			.svg-item>use {
				animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
			}

			.svg-item>use:nth-child(1) {
				animation-delay: -2s;
				animation-duration: 7s;
			}

			.svg-item>use:nth-child(2) {
				animation-delay: -3s;
				animation-duration: 10s;
			}

			.svg-item>use:nth-child(3) {
				animation-delay: -4s;
				animation-duration: 13s;
			}

			.svg-item>use:nth-child(4) {
				animation-delay: -5s;
				animation-duration: 20s;
			}

			@keyframes move-forever {
				0% {
					transform: translate3d(-90px, 0, 0);
				}

				100% {
					transform: translate3d(85px, 0, 0);
				}
			}
		</style>
	</head>
	<body>

		<div class="box">
			<svg class="svg-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
				<defs>
					<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
					</path>
				</defs>
				<g class="svg-item">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(6, 139, 166, 0.3)"></use>
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(85, 170, 255, 0.5)"></use>
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(6, 139, 166, 0.3)"></use>
					<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(85, 170, 255, 0.5)"></use>
				</g>
			</svg>
		</div>

	</body>
</html>
